<template>
  <!--判断是否增加还是修改-->
  <el-dialog
    :title="!dataForm.id ? '新增' : '修改'"
    :rules="rules"
    :close-on-click-modal="false"
    :visible.sync="visible"
    @closed="dialogClose"
  >
    <!--创建表单-->
    <el-form :model="dataForm" ref="dataForm" label-width="130px">
      <!--prop:向父组件传值-->
      <el-form-item label="用户名" prop="username">
        <el-input
          v-model="dataForm.username"
          placeholder="请输入用户名"
        ></el-input>
      </el-form-item>

      <el-form-item label="密码" prop="password">
        <el-input
          v-model="dataForm.password"
          placeholder="请输入密码"
        ></el-input>
      </el-form-item>

      <el-form-item label="登录名" prop="loginname">
        <el-input
          v-model="dataForm.loginname"
          placeholder="请输入登录名"
        ></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取 消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
//impo是引入对象
import qs from "qs";

export default {
  data() {
    return {
      visible: false,
      dataForm: {
        username: "",
        password: "",
        loginname: "",
        id: 0,
      },

      //限制长度
      rules: {
        username: [
          { required: true, message: "请输入用户名称", trigger: "blur" },
          {
            min: 3,
            max: 10,
            message: "长度在 3 到 10 个字符",
            trigger: "blur",
          },
        ],
        logginname: [
          { required: true, message: "请输入登录名", trigger: "blur" },
          { min: 3, max: 10, message: "长度在 3 到 10个字符", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 3, max: 6, message: "长度在 3 到 6 个字符", trigger: "blur" },
        ],
      },
    };
  },

  methods: {
    //对话框关闭
    dialogClose() {
      console.log("对话框关闭了");
    },

    //index.vue传进来的id
    //修改的用户信息要发请求
    init(id) {
      //如果用户的id传进来了，就是id，没有则为0
      this.dataForm.id = id || 0;
      this.visible = true; //显示对话框
      this.$nextTick(() => {
        //重置表单的所有字段
        this.$refs["dataForm"].resetFields();
        //判断
        if (this.dataForm.id) {
          var $this = this;
          //发异步请求到后台获取这个用户数据
          this.$axios
            .get(`http://localhost:8080/hrm/findById?id=` + id)
            .then(function (response) {
              //判断状态是否为200
              if (response.data && response.data.code === 200) {
                //修改前显示弹窗里面的值
                $this.dataForm.username = response.data.user.username;
                $this.dataForm.loginname = response.data.user.loginname;
                $this.dataForm.password = response.data.user.password;
              }
            });
        }
      });
    },

    dataFormSubmit() {
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          var $this = this;
          //alert(this.dataForm.id);
          //没有表单的id是新增，有是修改
          const url =
            `http://localhost:8080/hrm/` +
            (!this.dataForm.id ? "saveUser" : "updateUser");
          //异步请求  qs.stringify(this.dataForm):整个表单序列化（整个表单数据会组装成dataForm: {username:'张三',password:'123'...}
          this.$axios
            .post(url, qs.stringify(this.dataForm))
            .then(function (response) {
              //判断状态是否为200
              if (response.data.code === 200) {
                $this.$message({
                  message: "操作成功",
                  type: "success",
                  duration: 1500,
                  //关闭弹窗
                  onClose: () => {
                    $this.visible = false;
                    //更新表中的内容
                    $this.$emit("refreshDataList");
                  },
                });
              } else {
                //不成功的提示
              }
            });
        } else {
        }
      });
    },
  },
};
</script>